<template>
  <div class="wrap">
    <div class="admin-title">我的易购</div>
    <img class="pic" src="@/assets/userimg.jpg">
    <p>
      <span>账号:</span>
      <span class="usertxt">{{userdata.username}}</span>
    </p>
    <p>
      <span>身份:</span>
      <span class="usertxt">{{userdata.identity}}</span>
    </p>
     <p>
      <span>昵称:</span>
      <span class="usertxt">{{userdata.nickname}}</span>
    </p>
    <div class="logout" @click="logout">注销登录</div>
  </div>
  <FooterTab :pagename="pagename"></FooterTab>
</template>
<script>
import FooterTab from '@/components/FooterTab.vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ref } from 'vue'

// 获取账号信息
const GetUserData=()=>{
  const userdata = ref([])
  const router = useRouter()
  const getuserdata = async ()=> {
    const {userid,token} = localStorage
    // 没有登录
    if (!userid) {
      console.log("没登录")
      router.push('login')
      return
    }
    const res = await axios({
      url:"http://localhost:8888/users/info?id="+userid,
      headers:{"authorization":token}
    })
    // 登录过期：0是未登录
    if (res.data.code===401||res.data.code===0) {
      console.log(res.data.message)
      localStorage.clear()
      router.push('login')
      return
    }
    // 获取成功
    if (res.data.code===1) {
      console.log(res.data.cart)
      userdata.value = res.data.info
    }
  }
  return {getuserdata,userdata}
}
// 注册账号
const Logout =()=>{
  const router = useRouter()
  const logout = async ()=> {
    const {userid,token}=localStorage
    const res= await axios({
      url:"http://localhost:8888/users/logout?id="+userid,
      headers:{"authorization":token}
    })
    if(res.data.code===1){
      localStorage.clear()
      router.push('login')
    }
  }
  return {logout}
}
export default {
  name:"AdminView",
  components:{FooterTab},
  setup() {
     const pagename = "admin"
     const {getuserdata,userdata} = GetUserData()
     getuserdata()
     const {logout} = Logout()
     return {pagename,userdata,logout}
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  padding-top: 1.5rem;
  .admin-title {
    position: absolute;
    top: 0;
    width: 100%;
    height: .45rem;
    line-height: .45rem;
    font-size: .175rem;
    color: rgb(255, 255, 255);
    text-align: center;
    background-color: rgb(255, 183, 0);
  }
  .pic {
    width: 0.6rem;
    margin: .1rem auto;
    display: block;
  }
  p {
    height: .38rem;
    line-height:.38rem;
    margin-left: 50%;
    transform: translateX(-50%);
    border-bottom: .005rem solid rgb(215, 215, 215);
    text-align: center;
    color: #555;
    span {
      font-size: .15rem;
    }
    .usertxt {
      padding-left: .05rem;
    }
  }
  .logout {
    text-align: center;
    color: rgb(250, 196, 115);
    font-size: .15rem;
    margin-top: .2rem;
  }
}
</style>